<!-- 添加用户 -->
<template>
  <div class="adduser">
    <el-row>
      <el-col :span="24">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>用户管理</el-breadcrumb-item>
          <el-breadcrumb-item>添加用户</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-card>
      <el-form :model="addlist" :rules="rule" ref="ref">
        <el-form-item label="用户名" prop="user_name">
          <el-input v-model="addlist.user_name" placeholder="邮箱"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="user_password">
          <el-input
            v-model="addlist.user_password"
            placeholder="密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="addlist.phone" placeholder="手机号"></el-input>
        </el-form-item>
        <el-form-item label="用户头像">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:3008/api/user/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addUserFn">添加用户</el-button>
          <el-button type="info">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import tools from "@/utils/index";
import { Adduser } from "@/api/index";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},

  data() {
    var username = (rule, value, callback) => {
      //value 指的是输入框中的值
      if (value === "") {
        callback(new Error("请输入邮箱"));
      } else {
        if (!tools.rexname.test(value)) {
          callback(new Error("用户名不正确"));
        }
        callback();
      }
    };
    var phone = (rule, value, callback) => {
      //value 指的是输入框中的值
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else {
        if (!tools.rexPhone.test(value)) {
          callback(new Error("手机号格式不正确"));
        }
        callback();
      }
    };
    //这里存放数据
    return {
      addlist: {
        user_name: "",
        user_password: "",
        phone: "",
      },
      imageUrl: "",
      rule: {
        user_name: [{ validator: username, trigger: "blur" }],
        user_password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 4,
            max: 16,
            message: "长度在 4 到 16 个字符",
            trigger: "blur",
          },
        ],
        phone: [{ validator: phone, trigger: "blur" }],
      },
    };
  },
  //方法集合
  methods: {
    addUserFn() {
      this.$refs.ref.validate((valid) => {
        if (valid) {
          let obj = {
            user_name: this.addlist.user_name,
            user_password: this.addlist.user_password,
            phone: this.addlist.phone,
            imgsrc: this.imageUrl,
          };
          Adduser(obj).then((res) => {
            console.log(res);
            if (res.status == 200) {
              this.$router.push("/admin/userlist");
            }
          });
        } else {
          console.log("错误");
          return false;
        }
      });
    },
    handleAvatarSuccess(res) {
      console.log(res);
      this.imageUrl = "http://localhost:3008/" + res.data.name;
    },
    beforeAvatarUpload() {},
  },
};
</script>
<style lang="less">
.el-row {
  .el-breadcrumb {
    margin-bottom: 20px;
  }
}
.el-pagination {
  margin-top: 20px;
}
.el-switch__core {
  width: 60px !important;
}
.el-switch__label {
  display: none;
}
.el-switch__label--right {
  position: absolute;
}
.el-switch__label.is-active {
  display: block;
  color: #ffffff;
  font-size: 12px;
}
.el-switch__label--left {
  position: absolute;
  left: 20px;
  z-index: 99;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 118px;
  height: 118px;
  line-height: 118px;
  text-align: center;
}
.avatar {
  width: 118px;
  height: 118px;
  display: block;
}
</style>